<template>
    <!-- 根部必须有一个div：包含所有内容 -->
    <div>
        <Navigation :username="username"></Navigation>
        <div class='friend-page'>
            <div class='friend-window'>

                <div class='friend-list'>
                    <div class='friend-item' v-for="item in friend_list" :key="item.id" @click="chat(item)">
                        <div class='friend-info'>
                            <el-avatar :size=43 :src="circleUr"></el-avatar>
                        </div>
                        <div class='friend-info'>
                            {{ item.username }}
                        </div>
                    </div>
                </div>

                <div class='chat-window' v-if="chat_id">
                    <div class="chat-name"> {{ chat_username }} </div>
                    <div class="chat-line"/>
                    <div class="chat-content"> 
                        <div class="chat-info" v-for="item in message" :key="item.id">
                            <el-avatar class="chat-avatar" :size=30 :src="circleUr"></el-avatar>
                            <div class="chat-text">
                                <div class="chat-user">
                                    {{item[0]}}
                                </div>
                                <div class="chat-msg">
                                     {{item[1]}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chat-line"/>
                    <textarea class="chat-input" type="textarea" placeholder="请输入内容" v-model="text"/>
                    <div class="chat-button">

                        <el-button class="send" size=small plain @click="send">发送</el-button>
                    </div>
                </div>

            </div>
        </div>
    </div>  
</template>



<style>
    .friend-page {
        width: 100vw;
        height: calc(100vh - 56px);
        margin: 0px;
        display: flex;
        align-items: stretch;
        justify-content: center;
    }
    .friend-window {
        width: 1150px;
        min-width: 1150px;
        background-color: rgba(255, 255, 255, 0.658);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
    }
    .friend-list {
        width: 300px;
        min-width: 300px;
        margin: 10px 0px 10px 10px;
        background-color: rgba(255, 255, 255, 0.658);
        border-radius: 4px;
        overflow: auto;
    }
    /* 自定义滚动条简单版： */
    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    .friend-list::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #f5f5f5;
    }
    /*定义滚动条的轨道，内阴影及圆角*/
    .friend-list::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(110, 110, 110, 0.301);
        border-radius: 10px;
        background-color: #f3f3f3;
    }
    /*定义滑块，内阴影及圆角*/
    .friend-list::-webkit-scrollbar-thumb {
        /*width: 10px;*/
        height: 20px;
        border-radius: 4px;
        box-shadow: inset 0 0 6px rgb(255, 255, 255);
        background-color: rgb(175, 175, 175);
    }
    .friend-item {
        width: 278px;
        min-width: 278px;
        height: 70px;
        min-height: 70px;
        margin: 10px;
        background-color: rgb(255, 255, 255);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .friend-item:hover {
        background-color: rgb(235, 235, 235);
    }
    .friend-info {
        margin: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .chat-window {
        width: 820px;
        min-width: 820px;
        margin: 10px;
        background-color: rgba(255, 255, 255, 0.658);
        border-radius: 4px;
        display: flex;
        flex-direction:column;
        align-items: stretch;
    }
    .chat-name{
        height: 30px;
        min-height: 30px;
        background-color:rgb(255, 255, 255);
        margin:10px 10px 0px 10px;
        padding:10px 0px 0px 0px;
        border-radius: 4px 4px 0px 0px;
    }
    .chat-line{
        height: 1px;
        min-height: 1px;
        background-color: rgb(173, 173, 173);
        margin: 0px 10px 0px 10px;
    }
    .chat-content{
        background-color:rgb(243, 243, 243);
        margin:0px 10px 0px 10px;
        padding:25px;
        flex-grow: 1;
        border-radius: 0px 0px 4px 4px;
        overflow:auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

    }
    /* 自定义滚动条简单版： */
    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    .chat-content::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #f5f5f5;
    }
    /*定义滚动条的轨道，内阴影及圆角*/
    .chat-content::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(110, 110, 110, 0.301);
        border-radius: 10px;
        background-color: #f3f3f3;
    }
    /*定义滑块，内阴影及圆角*/
    .chat-content::-webkit-scrollbar-thumb {
        /*width: 10px;*/
        height: 20px;
        border-radius: 4px;
        box-shadow: inset 0 0 6px rgb(255, 255, 255);
        background-color: rgb(175, 175, 175);
    }
    .chat-info{
        display: flex;
        flex-direction: row;
        margin: 10px;
    }
    .chat-text{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0px 0px 0px 10px;
    }
    .chat-avatar{
        flex-shrink: 0;
    }
    .chat-user{
        font-size: 15px;
        color: rgb(172, 172, 172);
    }
    .chat-msg{
        border-radius: 2px 15px 15px 15px;
        background-color: rgb(255, 255, 255);
        padding: 10px 15px 10px 15px;
        text-align:left
    }





    .chat-input{
        height: 100px;
        min-height: 100px;
        color:#333;
        resize: none;
        margin: 0px 10px 0px 10px;
        padding:15px;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        font-size:15px;
        outline-style:none;
        background-color:rgb(255, 255, 255);
        border-radius: 4px 4px 0px 0px;
        border-width: 0px ;
        border-style:solid;
    }
    .chat-button{
        padding: 15px;
        background-color:rgb(255, 255, 255);
        margin:0px 10px 10px 10px;
        border-radius: 0px 0px 4px 4px;
        display: flex;
        justify-content: flex-end;
    }
    .send{
        width: 100px;
    }

    
</style>


<script>
    import Navigation from "../../components/Navigation.vue"
    import api from '../../utils/api.js'

    // import io from 'socket.io-client';
    // const socket = io('http://127.0.0.1:5000');


    export default {

        // 名字
        name: 'Friend',

        // 数据
        data() {
            return {
                text: '',
                message: [],
                friend_list: [],
                userid: '',
                username: '',
                chat_id:'',
                chat_username:'---',
                room: '_',
                circleUr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            }
        },

        // 引入(注册)组件
        components: {
            Navigation
        },

        sockets: {

            connect: function () {
                console.log('socket 连接成功')
            },

            message: function (val) {
                console.log('返回:' + val);
                this.message.push(val);
            },

            drinker: function(val){
                console.log('返回:' + val);
                this.message.push(val);
            }
        },

        // 方法
        methods: {

            chatroom: function(){
                var id1 = this.userid
                var id2 = this.$route.params.chatId
                if(id1 <= id2){
                    this.room = id1 + '_' + id2 
                }else{
                    this.room = id2 + '_' + id1 
                }
            },

            join: function(){
                this.chatroom()
                console.log('join: ' + this.room)
                this.$socket.emit('join',{
                    room: this.room
                })
            },

            leave: function(){
                console.log('leave: ' + this.room)
                this.$socket.emit('leave',{
                    room: this.room
                })
            },

            send: function(){
                if(this.text)
                {
                    // $socket is socket.io-client instance
                    this.$socket.emit('drinktalk', {
                        username: this.username, //必要时加密解决中文乱码encodeURI()
                        text: this.text,
                        room: this.room
                    })
                    this.$emit("input", this.text = ''); //v-model语法糖 反向触发input修改
                }
            },

            chat: function(friend){
                this.leave()
                this.message = []
                this.chat_id = friend.id
                this.chat_username = friend.username
                this.$router.push({ name: 'Friend', params: { chatId: friend.id}})
                this.join()
            },

            friend: function () {
                var path = api.api + "/friend/list"
                this.axios
                    .get(path)
                    .then(response => {
                        console.log(response)
                        this.friend_list = response.data
                    })
            }
        },

        watch: {
            $route(to, from) {
                // console.log(this.$route.params.chatId)
            },
        },

        mounted() {
            // 未登录跳转
            var path = api.api + "/user/state"
            this.axios
                .get(path)
                .then(response => {
                    console.log(response)
                    if (response.data.state == "未登录") {
                        this.$router.push({
                            path: '/login'
                        })
                    } else {
                        this.userid = response.data.users[0].id
                        this.username = response.data.users[0].username
                        let that = this
                        that.friend()
                    }
                })
        },

        beforeDestroy(){
            let that = this
            that.leave()
        }

    }
</script>